<template>
    <div class="supplydetail">
        <Head msg="供应商详情">
            <img :src="supply.collect==1?require('../image/icon-collected.png'):require('../image/icon-collect.png')"
                 class="component-head-img" @click="collect">
        </Head>
        <img :src="supply.img" class="supply-headbg">
        <div class="supply-congtent">
            <div class="list-name">{{supply.username}}</div>
            <div class="list-title">地址：{{supply.country}}{{supply.province}}{{supply.city}}{{supply.address}}</div>
            <div class="list-title">电话：{{supply.mobile}}</div>
        </div>
        <!-- 服务套餐  -->
        <div class='location-detail-seatMeal' style="margin-bottom: 0">
            <div class='location-detail-seatMeal-head'>服务产品</div>
            <div class='location-detail-seatMeal-list' @click="toGoods(item.id)" v-for="(item,index) in goods"
                 :key="index">
                <img :src='item.img' class='location-detail-seatMeal-pic'>
                <div class='location-detail-seatMeal-content'>
                    <div>
                        <div class='location-detail-seatMeal-title'>{{item.chinese_name}}</div>
                        <div class="english-title">{{item.english_name}}</div>
                    </div>
                    <!--                    <div class='location-detail-seatMeal-btn-main'>-->
                    <!--                        <div class='location-detail-seatMeal-btn'>购买</div>-->
                    <!--                    </div>-->
                    <div>
                        <div class='location-detail-seatMeal-num'>
                            <div class='location-detail-seatMeal-price'>
                                产品类型：
                            </div>
                            <div class='location-detail-seatMeal-sell'>{{item.product_category}}</div>
                        </div>
                        <div class='location-detail-seatMeal-num'>
                            <div class='location-detail-seatMeal-price'>
                                规格型号：
                            </div>
                            <div class='location-detail-seatMeal-sell'>{{item.specification_type}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!--底部-->
        <!--        <div class="supply-foot">-->
        <!--            <div class="supply-foot-list">-->
        <!--                <img class="supply-foot-img" src="../image/icon-enquery.png">-->
        <!--                <div class="supply-foot-title">产品询价</div>-->
        <!--            </div>-->
        <!--            <div class="supply-foot-list">-->
        <!--                <img class="supply-foot-img" src="../image/icon-test.png">-->
        <!--                <div class="supply-foot-title">样品检测</div>-->
        <!--            </div>-->
        <!--            <div class="supply-foot-list">-->
        <!--                <img class="supply-foot-img" src="../image/icon-shop.png">-->
        <!--                <div class="supply-foot-title">订单采购</div>-->
        <!--            </div>-->
        <!--        </div>-->

    </div>
</template>

<script lang="ts">
    // @ is an alias to /src
    import {Component, Vue} from "vue-property-decorator";
    import Sence from '../sence/Sence';
    import Head from '@/components/Head.vue';
    import HelloWorld from "@/components/HelloWorld.vue";
    import ImagePreview from "cube-ui/src/components/image-preview/image-preview.vue";

    @Component({
        components: {
            ImagePreview,
            HelloWorld,
            Head
        }
    })

    export default class Supplydetail extends Sence {
        public id: any = ''; // 供应商id
        public supply: any = []; // 供应商信息
        public goods: any = []; // 供应商
        /**
         * 初始化
         */
        public mounted(): void {
            this.id = this.$route.query.id;
            this.info();
            this.goodslist();
        }

        /**
         * 供应商详情
         */
        public info(): void {
            this.post('index.php/api/Supplier/info', {
                ids: this.id
            }).then((res: any) => {
                this.supply = res.data
            })
        }

        /**
         * 前往产品详情
         */
        public toGoods(id: number): void {
            (this as any).$router.push(`/supplygoods?id=${id}`)
        }

        /**
         * 产品列表
         */
        public goodslist(): void {
            this.post('index.php/api/Goods/list', {
                page: 1,
                limit: 1000,
                name: '',
                supplier: this.id
            }).then((res: any) => {
                this.goods = res.data;
            })
        }

        /**
         * 收藏
         */
        public collect(): void {
            if (this.supply.collect == 1) {
                this.collectDel();
            } else {
                this.collectAdd();
            }
        }

        /**
         * 添加收藏
         */
        public collectAdd(): void {
            this.post('index.php/api/Collect/add', {
                ids: this.id
            }).then((res: any) => {
                this.supply.collect = 1
            })
        }

        /**
         * 删除收藏
         */
        public collectDel(): void {
            this.post('index.php/api/Collect/del', {
                ids: this.id
            }).then((res: any) => {
                this.supply.collect = 2
            })
        }
    };
</script>
<style lang="stylus" scoped>
    .supplydetail
        background #f2f2f2

    .supply-headbg
        width 100vw
        height 75vw

    .supply-congtent
        position relative
        top -6vh
        display flex
        flex-direction column
        width 90vw
        padding 12px
        box-shadow 0 0 10px #ccc
        border-radius 8px
        margin auto
        background white

    .list-name
        font-size 16px
        font-weight bold
        margin-bottom 5px

    .list-title
        margin-top 6px
        font-size 13px
        color #808080
        line-height 17px

    .location-detail-seatMeal {
        position relative
        top -3vh
        display: flex;
        flex-direction: column;
        background: white;
        width: 92vw;
        margin: 0 auto;
        margin-bottom 40px
        border-radius: 8px;
        padding: 15px;
    }

    .location-detail-seatMeal-head {
        font-size: 16px;
        font-weight: bold;
        color: #4876ff;
    }

    .location-detail-seatMeal-head::before {
        content: '';
        position: relative;
        top: -2px;
        display: inline-block;
        height: 17px;
        width: 5px;
        background: #4876ff;
        margin-right: 8px;
        vertical-align: middle;
    }

    .location-detail-seatMeal-list {
        display: flex;
        flex-direction: row;
        padding: 10px 0;
        justify-content: space-between;
        border-bottom: 1px solid #e6e3e3;
    }

    .location-detail-seatMeal-list:last-child {
        border: none;
    }

    .location-detail-seatMeal-pic {
        display: block;
        width: 130px;
        height: 97.5px;
        border-radius: 5px;
    }

    .location-detail-seatMeal-content {
        display: flex;
        flex-direction: column;
        width: calc(92vw - 30px - 130px - 10px);
        justify-content space-around;
    }

    .location-detail-seatMeal-title {
        font-weight: bold;
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .location-detail-seatMeal-btn-main {
        width 100%;
        height 50px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        overflow: visible;
    }

    .location-detail-seatMeal-btn {
        background: linear-gradient(to right, #fa4254, #eb142a);
        position: relative;
        top: 8px;
        color: white;
        text-align: center;
        height: 30px;
        line-height: 30px;
        width: 55px;
        border-radius: 5px;
    }

    .location-detail-seatMeal-num {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top 8px;
    }

    .location-detail-seatMeal-price {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size 12px
    }

    .location-detail-seatMeal-realPrice {
        color: #d12c27;
        font-size: 16px;
        font-weight: bold;
    }

    .location-detail-seatMeal-marketPrice {
        margin-left: 5px;
        position: relative;
        font-size: 12px;
        top: 1px;
        color: #717171;
        text-decoration: line-through;
    }

    .location-detail-seatMeal-discount {
        background: #ebebeb;
        padding: 0 5px;
        color: #d12c27;
        font-size: 10px;
        border-radius: 30px;
        margin-left: 10px;
    }

    .location-detail-seatMeal-sell {
        color: #717171;
        position: relative;
        font-size: 11px;
    }

    .supply-foot {
        position fixed;
        bottom 0;
        display flex;
        flex-direction row;
        background white;
        box-shadow 0 0 10px #ccc
        height 40px
        width 100vw
    }

    .supply-foot {
        position fixed;
        bottom 0;
        left 0;
        right 0;
        display flex;
        flex-direction row;
        justify-content space-around;
        align-items center;
        background white;
        box-shadow 0 0 10px #ccc;
        height 50px;
        width 100vw;
    }

    .supply-foot-list
        display flex
        flex-direction column
        align-items center

    .supply-foot-img
        width 25px
        height 25px
        margin-bottom 5px

    .supply-foot-title
        font-size 12px
        color #515151

    .component-head-img
        position fixed
        width 25px
        height 25px
        top 10px
        right 6vw
        z-index 100

    .english-title
        color #808080
        margin-top 5px
        font-size 12px


</style>
